<template>
  <div>
  <h1>门店增加</h1>
    <table class="table table-bordered">
      <tbody>
      <tr>
        <td>门店名称</td>
        <td><input type="text" v-model="info.ShopName"/></td>
      </tr>
      <tr>
        <td>分店名称</td>
        <td><input type="text" v-model="info.BranchName"/></td>
      </tr>
      <tr>
        <td>门店图片</td>
        <td>
          <input type="file"  @change="img"/>
          <img :src="info.Photo" width="150" height="150" v-if="info.Photo!=''  "/>
        </td>
      </tr>
      <tr>
        <td>开业时间</td>
        <td><input type="date" v-model="info.OpenTime"  /></td>
      </tr>
      <tr>
        <td>是否启用</td>
        <td>
          <input type="radio" name="state" v-model="info.State" :value="1" />是
          <input type="radio" name="state" v-model="info.State" :value="0"/>否
        </td>
      </tr>

      <tr>
        <td>特色</td>
        <td>
          <input type="checkbox" name="tese"   v-model="info.TeSe" value="婚礼"/>婚礼
          <input type="checkbox" name="tese"  v-model="info.TeSe"  value="满月酒"/>满月酒
          <input type="checkbox" name="tese"  v-model="info.TeSe"  value="升学宴"/>升学宴
          <input type="checkbox" name="tese"  v-model="info.TeSe"  value="团建"/>团建
        </td>
      </tr>
      <tr>
        <td>门店介绍</td>
        <td><textarea cols="50" rows="5" v-model="info.Desc" >

        </textarea></td>
      </tr>

      <tr>
        <td>门店位置</td>
        <td>
          <select  v-model="info.AddresId">
          <option  value="">请选择</option>
          <option  :value="item.AddresId" v-for="item in addre">{{item.AddressName}}</option>
        </select>
        </td>
      </tr>
      <tr>
        <td>门店类型</td>
        <td>
          <select v-model="info.Type">
            <option value="">请选择</option>
            <option value="竞技酒店">竞技酒店</option>
            <option value="豪华酒店">豪华酒店</option>
            <option value="五星级酒店">五星级酒店</option>
          </select>
        </td>
      </tr>
      <tr>
        <td></td>
        <td><input  type="button" value="提交" class="btn btn-primary" @click="ok"/></td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import moment from "moment";
const router = useRouter()
const route = useRoute()

onMounted(() => {
  getlist();
})
//增加时后端需要的数据
let info:any=reactive({
  "ShopName": "",
  "BranchName": "",
  "Photo": "",
  "OpenTime": "",
  "State": 0,
  "TeSe": [],
  "Desc": "",
  "AddresId": "",
  "Type": "",
})
const ok=()=>{
  //有效判断
  if(info.ShopName==''){
    alert("门店名称不能为空")
    return;
  }
  if(info.BranchName==''){
    alert("分店名称")
    return;
  }
  if(info.OpenTime==''){
    alert("开业时间不能为空")
    return;
  }
  if(info.TeSe==''){
    alert("特色必选")
    return;
  }
  if(info.Desc==''){
    alert('门店介绍不能为空')
    return;
  }
  if(info.AddresId==''){
    alert('门店位置不能为空')
    return;
  }
  if(info.Type==''){
    alert("门店类型必选")
    return;
  }
  info.TeSe=info.TeSe.toString();
   //发送网络请求
  axios({
    url:'/api/Shop/ShopAdd',
    data:info,
    method:'post',
  }).then((res)=>{
    console.log(res)
    if(res.data>0){
      alert("添加成功");
      router.push('/shopList');
    }
    else {
      alert("名字重复");
    }

  }).catch((err)=>{
    console.log(err)
  })
}
//图片上传
const img =(e:any)=>{
//读取数据 e表示事件对象
  //将图片转成formdate 格式
  let obj=e.target.files[0];
  let f=new FormData();
  f.append("file",obj);
  //发送网络请求
  axios({
    url: '/api/Img/Img',
    method: 'post',
    data: f
  }).then((res) => {
    console.log(res)
    if(res.data=="不是图片")
    {
      alert("您上传的不是图片")
      return;
    }
    if(res.data=="大于2M"){
      alert("您上传的图片大于2M")
      return;
    }
    info.Photo=res.data
  })
  //增加操作
};

let addre:any=ref({

})
const getlist=()=>{
  axios({
    url:'/api/Shop/GetAddRessList',
    method:'get',
  }).then((res)=>{
    console.log(res)
    addre.value=res.data
  })
}


</script>

<style lang="scss" scoped>

</style>